$baseSpace:1em;//基准值
$outSpace:1em;//扩展值
$color1:rgba(255, 183, 77, 0.75);
$color2:rgba(139, 195, 74, 0.75);
$color3:rgba(92, 107, 192, 0.75);
$color4:rgba(244, 67, 54, 0.75);
//半透
$color1h:rgba(255, 183, 77, 0.35);
$color2h:rgba(139, 195, 74, 0.35);
$color3h:rgba(92, 107, 192, 0.35);
$color4h:rgba(244, 67, 54, 0.35);

//尾数代表使用几个子元素vi_loading_dot

//圈外三个错位旋转圆环
.vi_loading_animation.rotateRing-3{
	.vi_loading_dot{
		position: absolute;
		border-radius: 50%;
	}
	.vi_loading_dot:nth-child(1){
		width: calc(100% + #{$baseSpace *3 +$outSpace});
		height: calc(100% + #{$baseSpace *3 +$outSpace});
		top: #{-1.5*$baseSpace -$outSpace/2};
		left: #{-1.5*$baseSpace -$outSpace/2};
		box-sizing: border-box;
		border: 0.2em solid transparent;
		border-top-color: $color1;
		animation: rotateRing-3 3s linear infinite;
	}
	.vi_loading_dot:nth-child(2){
		width: calc(100% + #{$baseSpace *2 +$outSpace});
		height: calc(100% + #{$baseSpace *2 +$outSpace});
		top: #{-1*$baseSpace -$outSpace/2};
		left: #{-1*$baseSpace -$outSpace/2};
		box-sizing: border-box;
		border: 0.2em solid transparent;
		border-top-color: $color2;
		animation: rotateRing-3 2s linear infinite;
	}
	.vi_loading_dot:nth-child(3){
		width: calc(100% + #{$baseSpace *1 +$outSpace});
		height: calc(100% + #{$baseSpace *1 +$outSpace});
		top: #{-0.5*$baseSpace -$outSpace/2};
		left: #{-0.5*$baseSpace -$outSpace/2};
		box-sizing: border-box;
		border: 0.2em solid transparent;
		border-top-color: $color3;
		animation: rotateRing-3 1.5s linear infinite;
	}
}
@keyframes rotateRing-3{
	0%{}
	100%{
		transform: rotate(1turn);
	}
}

//圈外两个对称旋转圆环
.vi_loading_animation.rotateRing-2{
	.vi_loading_dot{
		position: absolute;
		border-radius: 50%;
	}
	.vi_loading_dot:nth-child(1){
		width: calc(100% + #{$baseSpace +$outSpace});
		height: calc(100% + #{$baseSpace +$outSpace});
		top: #{-0.5*($baseSpace +$outSpace)};
		left: #{-0.5*($baseSpace +$outSpace)};
		box-sizing: border-box;
		border: 0.2em solid transparent;
		border-top-color: $color1;
		animation: rotateRing-3 2s linear infinite;
	}
	.vi_loading_dot:nth-child(2){
		width: calc(100% + #{$baseSpace +$outSpace});
		height: calc(100% + #{$baseSpace +$outSpace});
		top: #{-0.5*($baseSpace +$outSpace)};
		left: #{-0.5*($baseSpace +$outSpace)};
		box-sizing: border-box;
		border: 0.2em solid transparent;
		border-bottom-color: $color2;
		animation: rotateRing-2 2s linear infinite;
	}
}
@keyframes rotateRing-2{
	0%{}
	100%{
		transform: rotate(1turn);
	}
}

//圈外两个交错旋转方块
.vi_loading_animation.rotateReverseBlock-2{
	.vi_loading_dot{
		position: absolute;
	}
	.vi_loading_dot:nth-child(1){
		width: calc(100% - #{$baseSpace *0.5});
		height: calc(100% - #{$baseSpace *0.5});
		top: #{0.25*$baseSpace};
		left: #{0.25*$baseSpace};
		box-sizing: border-box;
		border: 0.15em solid transparent;
		border-color: $color1;
		animation: rotateReverseBlock-2 3s ease-in-out 0s infinite alternate;
	}
	.vi_loading_dot:nth-child(2){
		width: calc(100% - #{$baseSpace *0.5});
		height: calc(100% - #{$baseSpace *0.5});
		top: #{0.25*$baseSpace};
		left: #{0.25*$baseSpace};
		box-sizing: border-box;
		border: 0.15em solid transparent;
		border-color: $color2;
		animation: rotateReverseBlock-2Re 3s ease-in-out 0s infinite alternate;
	}
}
@keyframes rotateReverseBlock-2 {
	0%{transform: rotate(0);}
	25%{transform: rotate(90deg);}
	50%{transform: rotate(180deg);}
	75%{transform: rotate(270deg);}
	100%{transform: rotate(359deg);}
}
@keyframes rotateReverseBlock-2Re {
	0%{transform: rotate(45deg);}
	25%{transform: rotate(-45deg);}
	50%{transform: rotate(-135deg);}
	75%{transform: rotate(-215deg);}
	100%{transform: rotate(-305deg);}
}

//圈外对称旋转4个半圆
.vi_loading_animation.rotateCircular-1{
	.vi_loading_dot{
		position: absolute;
		border-radius: 50%;
		width: 80%;
		height: 80%;
		top: 10%;
		left: 10%;
		box-sizing: border-box;
		border: 0.2em solid transparent;
		border-top-color: $color1;
		box-shadow: 2em 0 0 $color1h, -2em 0 0 $color2h,
		  0 2em 0 $color3h, 0 -2em 0 $color4h;
		animation: rotateCircular-1 2s ease-in-out infinite;
	}
}
@keyframes rotateCircular-1 {
	50% {
		transform: rotate(0) scale(0.8);
	}
	100% {
		transform: rotate(1turn) scale(1);
	}
}

//圈外跳跃4个小圆跳跃+旋转
.vi_loading_animation.jumpCircular-4{
	.vi_loading_dot{
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		&::before{
			content: "";
			position: absolute;
			width: 1em;
			height: 1em;
			border-radius: 50%;
		}
		animation: jumpCircular-rotate 3s linear infinite;
	}
	.vi_loading_dot:nth-child(1)::before{
		top: -1em;
		left: calc(50% - 0.5em);
		background-color: $color1;
		animation: jumpCircular-4t 0.5s ease 0s infinite alternate;
	}
	.vi_loading_dot:nth-child(2)::before{
		top: calc(50% - 0.5em);
		right: -1em;
		background-color: $color2;
		animation: jumpCircular-4r 0.5s ease 0s infinite alternate;
	}
	.vi_loading_dot:nth-child(3)::before{
		bottom: -1em;
		left: calc(50% - 0.5em);
		background-color: $color3;
		animation: jumpCircular-4b 0.5s ease 0s infinite alternate;
	}
	.vi_loading_dot:nth-child(4)::before{
		top: calc(50% - 0.5em);
		left: -1em;
		background-color: $color4;
		animation: jumpCircular-4l 0.5s ease 0s infinite alternate;
	}
}
@keyframes jumpCircular-rotate {
	from{transform: rotate(0);}
	to{transform: rotate(1turn);}
}
@keyframes jumpCircular-4t {
	from{transform: translate(0, 0);}
	to{transform: translate(0, -1em);}
}
@keyframes jumpCircular-4r {
	from{transform: translate(0, 0);}
	to{transform: translate(1em, 0);}
}
@keyframes jumpCircular-4b {
	from{transform: translate(0, 0);}
	to{transform: translate(0, 1em);}
}
@keyframes jumpCircular-4l {
	from{transform: translate(0, 0);}
	to{transform: translate(-1em, 0);}
}